<template>
    <div>
        <el-dialog :title="`${thisEditData.goods_name}——信息修改`" :visible.sync="centerDialogVisible" width="60%" center :modal="true">
            <el-form ref="form" :model="thisEditData" label-width="150px">
                <el-form-item label="商品名字">
                    <el-input v-model="thisEditData.goods_name" width="60%"></el-input>
                </el-form-item>
                <el-form-item label="商品类型">
                    <el-input v-model="thisEditData.goods_type" width="60%"></el-input>
                </el-form-item>
                <el-form-item label="商品库存数量">
                    <el-input v-model="thisEditData.goods_num" width="60%"></el-input>
                </el-form-item>
                <el-form-item label="商品成熟季节">
                    <el-input v-model="thisEditData.goods_season" width="60%"></el-input>
                </el-form-item>
                <el-form-item label="商品产区">
                    <el-input v-model="thisEditData.goods_source" width="60%"></el-input>
                </el-form-item>
                <el-form-item label="商品图片">
                    <div class="crop-demo">
                        <img :src="thisEditData.goods_image" class="pre-img" />
                        <div class="crop-demo-btn">
                            选择图片
                            <input class="crop-input" type="file" name="image" accept="image/*" @change="setImage" />
                        </div>
                    </div>
                </el-form-item>
                <el-form-item label="园区采摘价格">
                    <el-input v-model="thisEditData.goods_parkPrice" width="60%"></el-input>
                </el-form-item>
                <el-form-item label="线上销售价格">
                    <el-input v-model="thisEditData.goods_onLinePrice" width="60%"></el-input>
                </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button @click="childCenterDialogVisibleChange">取 消</el-button>
                <el-button type="primary" @click="onSubmit">编 辑</el-button>
            </span>
        </el-dialog>
    </div>
</template>

<script>
import { submitGoodsEdit } from '../../../api/index';
export default {
    data() {
        return {
            thisEditData: this.editData
        };
    },
    computed: {},
    watch: {
        editData(newVal, oldVal) {
            this.thisEditData = newVal;
        }
    },
    methods: {
        childCenterDialogVisibleChange: function () {
            this.$emit('parentCenterDialogVisibleChange', this.centerDialogVisible);
        },
        onSubmit() {
            console.log(this.editData.customer_age, 'editData');
            console.log(this.thisEditData, 'thisEditData');
            // const params = `customer_id=${this.thisEditData.customer_id}&customer_type=${this.thisEditData.customer_type}`;
            const params = {
                goods_id: this.thisEditData.goods_id,
                goods_type: this.thisEditData.goods_type,
                goods_num: this.thisEditData.goods_num,
                goods_name: this.thisEditData.goods_name,
                goods_season: this.thisEditData.goods_season,
                goods_source: this.thisEditData.goods_source,
                goods_image: this.thisEditData.goods_image,
                goods_parkPrice: this.thisEditData.goods_parkPrice,
                goods_onLinePrice: this.thisEditData.goods_onLinePrice,
            };
            submitGoodsEdit(params).then((res) => {
                console.log(res);
                if (res) {
                    if (res === 'ok') {
                        this.$message({
                            message: '编辑成功',
                            type: 'success'
                        });
                    } else {
                        this.$message.error('编辑失败');
                    }
                }
            });
        },
        setImage(e) {
            const file = e.target.files[0];
            if (!file.type.includes('image/')) {
                console.log(this.thisEditData.goods_image);
                return;
            }
            const reader = new FileReader();
            reader.onload = (event) => {
                // this.dialogVisible = true;
                this.thisEditData.goods_image = event.target.result;
                // this.$refs.cropper && this.$refs.cropper.replace(event.target.result);
            };
            reader.readAsDataURL(file);
            console.log(this.thisEditData.goods_image);
        }
    },
    props: ['centerDialogVisible', 'editData']
};
</script>

<style scoped>
/* .el-input{
    display: ;
} */
.crop-demo {
    display: flex;
    align-items: flex-end;
}
.crop-demo img {
    width: 150px;
    height: 150px;
    margin-right: 20px;
}
.crop-demo-btn {
    position: relative;
    width: 100px;
    height: 40px;
    line-height: 40px;
    padding: 0 20px;
    margin-left: 30px;
    background-color: #409eff;
    color: #fff;
    font-size: 14px;
    border-radius: 4px;
    box-sizing: border-box;
}
.crop-input {
    position: absolute;
    width: 100px;
    height: 40px;
    left: 0;
    top: 0;
    opacity: 0;
    cursor: pointer;
}
</style>